<template>
  <div class="article-list">
    <van-pull-refresh 
      v-model="isLoading" 
      @refresh="onRefresh"
      :success-text="successText"
      success-duration="1000"
    >
      <!-- 
          列表组件
            load事件：加载数据
                1、页面一进入就加载数据（就调用load事件），获取数据，渲染列表内容，如果列表内容可以铺满整个屏幕，如果铺满了就不再触发，如果没有铺满，继续触发load事件，直到页面铺满为止。(每次都要给列表数组追加数据，而不是赋值！)
                2、列表滚动到了底部，再次触发load事件，直到没有数据为止。
            v-model:"变量"
                变量的意思控是否显示加载中。
                load事件触发了，自动将变量设置为true.
                每次数据请求结束要手动关闭加载框,设置为false
            finished:布尔值
                是否完全加载结束所有数据了，如果为true表示没有数据了，不需要再滚动加载了

       -->
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
          >
          <!-- 列表项组件 -->
          <article-item 
            v-for="(item,index) in list" 
            :key="index"
            :article="item"
          >
          </article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleList } from '@/api/article'
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    //   定义自定义属性接收自己的频道信息
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
        isLoading:false,  // 是否正在下拉加载
        successText:'',// 成功的提示文字
        list: [],  // 数据列表
        error:false,  // 是否出错
        loading: false,   // 控制是否在加载中
        finished: false,  // 所有数据是否结束
        timestamp: Date.now()    // 当前时间戳
    }
  },
  methods: {
    async onLoad() {
      try {
        // 测试代码
        // if(Math.random() > .5){
        //   console.log(JSON.parse('abc'))
        // }

        // 1、请求数据
        const { data:res } = await getArticleList({
          channel_id:this.channel.id,  // 频道ID
          timestamp:this.timestamp,  // 时间戳，功能类似页码
          with_top:1   // 包含置顶信息
        })
        // 2、设置给列表数据 【追加数据】
        this.list.push(...res.data.results)
        // 3、关闭加载框（这一次的请求结束了）
        this.loading = false
        // 4、判断是否已经结束（是否还要进行滚动加载监听）
        if(res.data.results.length<10){
          this.finished = true   // 返回的长度小于10个说明这是最后一页
        }else{
          // 还有数据，就设置下页数据的页码时间戳
          this.timestamp = res.data.pre_timestamp   
        }
      
      } catch (error) {
        this.$toast.fail('获取列表数据失败')
        this.error = true  // 出错了
        this.loading = false  // 出错了也要关闭加载框
      }
       
    },
    // 下拉触发函数
    async onRefresh(){
       // 获取最新的数据！放在列表的顶部！
      try {
        // 1、请求数据
        const { data:res } = await getArticleList({
          channel_id:this.channel.id,  // 频道ID
          timestamp:Date.now(),  // 最新数据就是传当前时间戳
          with_top:1   // 包含置顶信息
        })
        // 2、设置给列表数据 【追加到列表的顶部】
        this.list.unshift(...res.data.results)
        // 设置成功的提示文字
        this.successText = `客官，为您刷新${res.data.results.length}条数据`
      } catch (error) {
        this.$toast.fail('下拉刷新失败')
      }
      // 无论成功失败都要关闭下拉刷新
       this.isLoading = false  
    }
  }
}
</script>

<style scoped lang="less">
.article-list{
  overflow-y: scroll;
  height: 79vh;
}
</style>
